import { deepMerge } from '../utils'

const getComponent = () => ({
  uid: 0, // 唯一id
  key: '', // 组件英文名
  name: '', // 组件中文名
  icon: '', // 组件图标
  documentUrl: '', // 组件文档
  hidden: false, // false(或空):显示、渲染; true:隐藏、不渲染;
  // 插槽
  slots: {
    // type: HTML|COMPONENT
    prepend: { type: 'HTML', value: '' }, // 前插槽
    append: { type: 'HTML', value: '' } // 后插槽
  },
  // el-row el-col 布局
  col: {
    span: 24, // 布局所占列数
    style: {} // 原生样式
  },
  // el-form el-form-item
  item: {
    label: '', // 字段中文名
    style: {}, // 原生样式
    required: undefined, // 表单必填
    rule: [] // 表单验证规则
  },
  // 组件配置
  widget: {
    tag: '', // 原生标签名
    virtualTag: '', // 虚拟标签名
    tagType: '', // 标签类型: FORM:表单元素; CUSTOM:自定义; PANEL:面板;
    html: '', // html字符串
    field: '', // 模型字段
    virtualField: '', // 虚拟字段
    className: '', // class
    /* 
    不能直接用函数，因为JSON格式化后，函数没了
    */
    valueType: 'string', // 值类型
    groupProps: {}, // 虚拟属性
    props: {}, // 虚拟属性
    attrs: {}, // 原生属性
    on: {}, // 虚拟事件
    nativeOn: {}, // 原生事件
    style: {} // 原生样式
  },
  dict: {
    list: [], // 字典列表
    label: 'label', // 字典名、描述
    value: 'value', // 字典ID
    type: 'LOCAL', // LOCAL:本地数据; INTERFACE:接口获取;
    fetch: {
      url: '', // 请求地址
      method: 'GET', // 请求方法
      params: [
        // { label: "", value: "" }
      ] // 请求参数
    }
  },
  subWidgets: [], // 子组件
  isSubWidget: false, // 是否是子组件
  buttonGroup: [], // 按钮组
  // table 配置
  table: {
    columns: [],
    label: 'label', // 显示的标题
    prop: 'prop', // 对应列内容的字段名
  }
})

const radio = {
  item: {
    label: '单选框'
  },
  widget: {
    virtualTag: 've-radio',
    props: {
      defaultValue: '1'
    }
  },
  dict: {
    list: [
      { value: '1', label: 'radio-1' },
      { value: '2', label: 'radio-2' }
    ]
  }
}
const checkbox = {
  item: {
    label: '复选框'
  },
  widget: {
    virtualTag: 've-checkbox',
    valueType: 'array',
    props: {
      defaultValue: ['1']
    }
  },
  dict: {
    list: [
      { value: '1', label: 'checkbox-1' },
      { value: '2', label: 'checkbox-2' }
    ]
  }
}
const input = {
  item: {
    label: '文本框'
  },
  widget: {
    virtualTag: 've-input',
    props: {
      type: 'text',
      placeholder: '请输入'
    }
  }
}
const textarea = {
  item: {
    label: '文本域'
  },
  widget: {
    virtualTag: 've-input',
    props: {
      type: 'textarea',
      placeholder: '请输入'
    }
  }
}
const password = {
  item: {
    label: '密码框'
  },
  widget: {
    virtualTag: 've-input',
    props: {
      type: 'password',
      showPassword: true
    }
  }
}
// eslint-disable-next-line
const quillEditor = {
  item: {
    label: '富文本框'
  },
  widget: {
    virtualTag: 've-quill-editor'
  }
}
const stepper = {
  item: {
    label: '计数器'
  },
  widget: {
    virtualTag: 've-stepper',
    valueType: 'number'
  }
}
const select = {
  item: {
    label: '下拉框'
  },
  widget: {
    virtualTag: 've-select',
    props: {
      defaultValue: '1'
    }
  },
  dict: {
    list: [
      { value: '1', label: 'select-1' },
      { value: '2', label: 'select-2' }
    ]
  }
}
const cascader = {
  item: {
    label: '级联选择'
  },
  widget: {
    virtualTag: 've-cascader',
    props: {
      defaultValue: '1'
    }
  },
  dict: {
    list: [
      {
        value: 1,
        label: '湖北省',
        children: [
          {
            value: 2,
            label: '武汉市',
            children: [
              { value: 3, label: '市区1' },
              { value: 4, label: '市区2' }
            ]
          },
          {
            value: 5,
            label: '长沙市',
            children: [
              { value: 6, label: '市区1' },
              { value: 7, label: '市区2' }
            ]
          }
        ]
      }
    ]
  }
}
const switcher = {
  item: {
    label: '开关'
  },
  widget: {
    virtualTag: 've-switcher',
    valueType: 'boolean'
  }
}
const slider = {
  item: {
    label: '滑块'
  },
  widget: {
    virtualTag: 've-slider',
    valueType: 'number'
  }
}
const datePicker = {
  item: {
    label: '日期选择'
  },
  widget: {
    virtualTag: 've-date-picker'
  }
}
const buttonGroup = {
  col: {
    style: {
      'margin-bottom': '18px'
    }
  },
  item: {
    label: '按钮组'
  },
  widget: {
    virtualTag: 've-button-group',
    tagType: 'CUSTOM',
    props: {
      position: 'left'
    }
  },
  buttonGroup: [
    {
      uid: 'reset',
      label: '重置',
      attrs: {},
      props: {
        id: undefined
      },
      on: {}
    },
    {
      uid: 'submit',
      label: '提交',
      attrs: {},
      props: {
        type: 'primary',
        id: undefined
      },
      on: {}
    }
  ]
}
// eslint-disable-next-line
const title = {
  col: {
    style: {
      'margin-bottom': '18px'
    }
  },
  item: {
    label: '表单标题'
  },
  widget: {
    tag: 'div',
    virtualTag: 've-title',
    tagType: 'CUSTOM',
    style: {
      padding: '10px 0',
      fontWeight: 600
    }
  }
}
// eslint-disable-next-line
const divider = {
  col: {
    style: {
      'margin-bottom': '18px'
    }
  },
  item: {
    label: '分割线'
  },
  widget: {
    virtualTag: 've-divider',
    tagType: 'CUSTOM',
    props: {
      contentPosition: 'left'
    }
  }
}
// eslint-disable-next-line
const panel = {
  col: {
    style: {
      'margin-bottom': '18px'
    }
  },
  item: {
    label: '表单面板'
  },
  widget: {
    virtualTag: 've-panel',
    tagType: 'PANEL'
  }
}
// eslint-disable-next-line
const custom = {
  col: {
    style: {
      'margin-bottom': '18px'
    }
  },
  item: {
    label: '自定义'
  },
  widget: {
    tag: 'el-input',
    virtualTag: 've-custom',
    tagType: 'CUSTOM',
    className: 've-custom',
    style: {
    }
  }
}
// eslint-disable-next-line
const table = {
  col: {
    style: {
      'margin-bottom': '18px'
    }
  },
  item: {
    label: '表格'
  },
  widget: {
    virtualTag: 'VeTable',
    tagType: 'CUSTOM',
    className: 've-table',
    props: {
      border: true,
      defaultValue: [
        { id: '1', name: '名称1', grade: '本科', address: '大学城' },
        { id: '2', name: '名称2', grade: '大专', address: '江北' },
      ]
    }
  },
  table: {
    columns: [
      { prop: 'id', label: '#' },
      { prop: 'name', label: '名称' },
      { prop: 'grade', label: '学历' },
      { prop: 'address', label: '地址' },
    ]
  }
}

export const componentDef = () => {
  const data = {
    radio,
    checkbox,
    input,
    textarea,
    password,
    quillEditor,
    stepper,
    select,
    cascader,
    switcher,
    slider,
    datePicker,
    title,
    divider,
    panel,
    table,
    custom,
    buttonGroup,
  }
  Object.keys(data).forEach((k, i) => {
    const o = data[k]
    o.uid = i
    o.key = k
    o.name = o.item.label
    o.widget.field = o.widget.field || k
    data[k] = deepMerge(getComponent(), o)
  })
  return data
}

export const basicComponents = () => {
  const list = [
    {
      title: '输入类型组件',
      list: [
        'input',
        'textarea',
        'password',
        'quillEditor',
        'stepper'
      ]
    },
    {
      title: '选择类型组件',
      list: [
        'select',
        'radio',
        'checkbox',
        'switcher',
        'slider',
        'cascader'
      ]
    },
    {
      title: '时间类型组件',
      list: [
        'datePicker'
      ]
    },
    {
      title: '上传类型组件',
      list: [
        'upload'
      ]
    },
    {
      title: '布局类型组件',
      list: [
        'panel'
      ]
    },
    {
      title: '其他型组件',
      list: [
        'title',
        'divider',
        'custom',
        'buttonGroup',
        'table'
      ]
    }
  ]
  const component = componentDef()
  list.forEach((item, i) => {
    item.uid = i
    item.list.forEach((name, idx) => {
      item.list[idx] = component[name]
    })
  })
  return list
}
